<template>
  <div class="app-container" v-loading.fullscreen.lock="fullscreenLoading">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="happenLocation">
        <el-input
          v-model="list.filter.happenLocation"
          placeholder="事发地点"
          clearable
        >
          <i slot="prefix" class="el-input__icon el-icon-search" />
        </el-input>
      </el-form-item>
      <el-form-item prop="status">
        <KiSelect
          v-model="list.filter.status"
          :options="dict.complaint_status"
          placeholder="处理状态"
        />
      </el-form-item>
      <el-form-item prop="endTime" label="提交时间：">
        <TimeRangePicker
          :start.sync="list.filter.startTime"
          :end.sync="list.filter.endTime"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <div>
        <auth-button
          @click="getProperty('COMPLAINT_PHONE')"
          name="设置投诉电话"
          type="primary"
        />
        <auth-button
          @click="getProperty('COMPLAINT_LIMIT')"
          name="设置每日投诉次数"
          type="primary"
        />
      </div>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table v-loading="list.loading" :data="list.data" v-bind="tableProp">
      <el-table-column label="事发地点" align="center" prop="happenLocation" />
      <el-table-column label="投诉对象" align="center" prop="complaintType" />
      <el-table-column label="处理状态" align="center">
        <template slot-scope="{ row }">
          <el-tag :type="disposeStatus[row.status]">
            {{ row.status | $value2label(dict['complaint_status']) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" align="center" prop="complaintTime" />
      <el-table-column label="处理时间" align="center" prop="operateTime" />
      <el-table-column label="评价时间" align="center" prop="evaluateTime" />
      <el-table-column label="操作" align="center" class-name="small-padding">
        <template slot-scope="{ row }">
          <auth-button @click="r({ id: row.id })" name="查看" />
          <auth-button
            @click="u({ id: row.id })"
            name="处理"
            circle
            type="primary"
            v-if="row.status === '1'"
          >
            <i class="el-icon-finished"></i>
          </auth-button>
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <div class="user-weChat">
          <span>用户微信昵称：{{form.data.userNickName}}</span>
          <span>微信绑定电话：{{form.data.userPhone}}</span>
        </div>
        <el-form-item label="投诉时间">
          <el-input v-model="form.data.complaintTime" disabled clearable />
        </el-form-item>
        <el-form-item label="事发地点">
          <el-input v-model="form.data.happenLocation" disabled clearable>
            <el-button slot="append" @click="showCoordPicker = true">
              查看地图
            </el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="投诉对象">
          <el-input v-model="form.data.complaintType" disabled clearable />
        </el-form-item>
        <el-form-item label="投诉原因">
          <el-input
            v-model="form.data.complaintContent"
            type="textarea"
            :autosize="{ minRows: 3 }"
            disabled
            clearable
          />
        </el-form-item>
        <el-form-item label="图片">
          <PicViewer :value="form.data.image" />
        </el-form-item>
        <el-form-item label="联系人">
          <el-input v-model="form.data.userName" disabled clearable />
        </el-form-item>
        <el-form-item label="联系电话">
          <!-- <el-input v-model="form.data.phone" disabled clearable/> -->
          <el-input
            :value="form.data.phone | desensitization"
            disabled
            clearable
          />
        </el-form-item>
        <el-form-item label="处理结果" prop="operateContent" verify>
          <el-input
            v-model="form.data.operateContent"
            type="textarea"
            :autosize="{ minRows: 3 }"
            :disabled="form.status === 'r'"
            maxlength="500"
            show-word-limit
            clearable
          />
        </el-form-item>
        <template v-if="form.status === 'r'">
          <el-form-item label="处理时间">
            <el-input v-model="form.data.operateTime" disabled clearable />
          </el-form-item>
          <el-form-item label="处理人">
            <el-input v-model="form.data.operateUserName" disabled clearable />
          </el-form-item>
          <el-form-item label="评价">
            <el-rate
              v-model="form.data.evaluateLevel"
              style="margin-top: 8px"
              disabled
              :texts="['非常不满意', '不满意', '一般', '满意', '非常满意']"
              show-text
            />
          </el-form-item>
          <el-form-item label="评价时间">
            <el-input v-model="form.data.evaluateTime" disabled clearable />
          </el-form-item>
        </template>
      </template>
    </KiFormDialog>

    <CoordPicker
      :show.sync="showCoordPicker"
      :lng.sync="form.data.longitude"
      :lat.sync="form.data.latitude"
      :address.sync="form.data.happenLocation"
    />

    <el-dialog
      title="设置投诉电话"
      :visible.sync="complaintInfo.show"
      :close-on-click-modal="false"
      custom-class="custom-dialog"
      width="800px"
    >
      <el-form
        ref="complaintInfoForm"
        class="complaintInfo"
        :model="complaintInfo"
        label-position="top"
      >
        <el-row
          :gutter="20"
          v-for="(item, index) in complaintInfo.data"
          :key="index"
        >
          <el-col :span="4">
            <el-form-item
              label="是否启用"
              :prop="'data.' + index + '.status'"
              verify
            >
              <el-switch
                v-model="item.status"
                active-value="1"
                inactive-value="0"
              />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item
              label="按钮名称"
              :prop="'data.' + index + '.name'"
              verify
            >
              <el-input
                v-model="item.name"
                placeholder="请输入按钮名称"
                clearable
                :disabled="item.status != '1'"
                maxlength="7"
              />
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item
              label="电话"
              :prop="'data.' + index + '.phone'"
              verify
            >
              <el-input
                v-model="item.phone"
                placeholder="请输入电话"
                clearable
                :disabled="item.status != '1'"
                maxlength="20"
              />
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item label="移除">
              <el-button
                type="warning"
                icon="el-icon-delete"
                circle
                @click="complaintInfo.data.splice(index, 1)"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-button
          v-if="complaintInfo.data.length < 5"
          icon="el-icon-plus"
          @click="addBtn"
        >
          添加
        </el-button>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="complaintInfo.show = false">关 闭</el-button>
        <el-button
          type="primary"
          @click="complaintInfoSubmit()"
          :loading="complaintInfo.loading"
        >
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import { mapActions } from 'vuex'

export default {
  mixins: [pageMixin],
  setup: () =>
    useAdmateAdapter(
      {
        urlPrefix: 'one-travel-api/complaint',
        axiosConfig: {
          u: {
            url: 'dealWith'
          }
        },
        list: {
          filter: {
            happenLocation: null,
            status: null,
            startTime: '',
            endTime: ''
          }
        }
      },
      {
        formTitleHash: {
          c: '新增',
          r: '查看',
          u: '处理'
        }
      }
    ),
  data () {
    return {
      showCoordPicker: false,
      disposeStatus: ['', 'danger', 'info', 'success'],
      complaintInfo: {
        show: false,
        loading: false,
        data: [
          {
            status: '1',
            name: '',
            phone: ''
          }
        ]
      },
      complaintNum: 3,
      fullscreenLoading: false
    }
  },
  watch: {
    'form.show' (n) {
      if (!n) {
        this.getMsg()
      }
    }
  },
  created () {
    if (this.$route.query.status) {
      setTimeout(() => {
        this.list.filter.status = '1'
      }, 300)
    }
  },
  methods: {
    ...mapActions({
      getMsg: 'user/getMsg'
    }),
    submit () {
      this.form.data = {
        id: this.form.data.id,
        operateContent: this.form.data.operateContent
      }
      return this.submitForm()
    },
    addBtn () {
      this.complaintInfo.data.push({
        status: '1',
        name: '',
        phone: ''
      })
    },
    getProperty (k) {
      this.fullscreenLoading = true
      this.$POST('one-travel-api/property/getValue', {
        id: k
      })
        .then(res => {
          if (res.errorCode == '00000') {
            if (k == 'COMPLAINT_PHONE') {
              this.complaintInfo.data = res.data ? JSON.parse(res.data) : []
              this.complaintInfo.show = true
            }
            if (k == 'COMPLAINT_LIMIT') {
              this.complaintNum = +res.data || 3
              this.setComplaintNum()
            }
          } else {
            this.$swal.error(res.message)
          }
          this.fullscreenLoading = false
        })
        .catch(() => {
          this.fullscreenLoading = false
        })
    },
    setComplaintNum () {
      this.$prompt('每日可投诉次数', '设置每日投诉次数', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: this.complaintNum,
        closeOnClickModal: false,
        inputValidator (val) {
          let value = +val
          if (isNaN(value)) {
            return '请输入正确的数字'
          } else if (value % 1 > 0 || value < 1 || value > 10) {
            return '请输入小于10的正整数'
          } else {
            return true
          }
        }
      }).then(({ value }) => {
        this.setProperty('COMPLAINT_LIMIT', value)
        this.complaintNum = value
      })
    },
    complaintInfoSubmit () {
      this.$refs.complaintInfoForm.validate(valid => {
        if (valid) {
          this.complaintInfo.loading = true
          this.setProperty(
            'COMPLAINT_PHONE',
            JSON.stringify(this.complaintInfo.data)
          )
            .then(() => {
              this.complaintInfo.loading = false
              this.complaintInfo.show = false
            })
            .catch(() => {
              this.complaintInfo.loading = false
            })
        }
      })
    },
    setProperty (k, v) {
      return new Promise((resv, rej) => {
        this.$POST('one-travel-api/property/setValue', {
          k,
          v
        })
          .then(res => {
            if (res.errorCode == '00000') {
              this.$swal.success('设置成功')
              resv()
            } else {
              this.$swal.error(res.message)
              rej()
            }
          })
          .catch(() => {
            rej()
          })
      })
    }
  },
  filters: {
    desensitization (phone) {
      if (phone && phone.length == 11) {
        // return `${phone.substr(0,3)}****${phone.substring(7)}`
        return phone
      } else {
        return phone
      }
    }
  }
}
</script>

<style scoped lang="scss">
:deep(.complaintInfo) {
  .el-form-item {
    margin-bottom: 0;
  }
  .el-form-item__label {
    padding: 0;
  }
}
:deep(.user-weChat) {
  border-radius: 2px;
  margin-bottom:18px;
  padding:18px;
  background-color: #f4f4f5;
  >span{
    color :#409eff;
    margin-right:48px;
  }
}
</style>
